<template>
	<div class="form">
		<div class="form-group" :class="{'form-group--error':$v.formData.account.$error}"> 
			<input type="text" v-model.trim="formData.account" @input="$v.formData.account.$touch()" class="form-control" placeholder="请输入手机" >
			<div>
				<label v-if="!$v.formData.account.required" class="form-group__message zoomIn animated animated_500ms">账号不能为空</label>
			</div>
		</div>
		<div class="form-group" :class="{'form-group--error':$v.formData.code.$error}">
			<div class="input-group">
				<input type="text" v-model.trim="formData.code" @input="$v.formData.code.$touch()" class="form-control" placeholder="请输入验证码" >
				<a v-if="!isGetCode" href="javascript:;" @click.prevent="getCode()" class="input-group-addon form-group__code">获取验证码</a>
                <a v-else href="javascript:;" ref="clock" class="input-group-addon form-group__code clock">60秒</a>
			</div>
			<div>
				<label v-if="!$v.formData.code.required"  class="form-group__message zoomIn animated animated_500ms">验证码不能为空</label>
			</div>
		</div>
		<div class="btn-area">
			<button type="button" class="btn form-control active" @click.stop="login()">登录</button>
			<button type="button" class="btn form-control" @click.stop="changeModule('login')">使用密码登录</button>
		</div>
		<p class="fg-pwd text-right">忘记密码?</p>
	</div>
</template>
<script>

	import { required } from 'vuelidate/lib/validators'
	const COUNT_DOWN = 60;

	export default {
		name:'phone-login',
		data(){
			return {
				isGetCode:false,
				formData:{
					account:'',
					code:''
				}
			}	
		},
		methods:{
			changeModule(m){
				this.$store.dispatch( 'changeCurrentView','login' )
			},
			getCode(){
				let that = this;
				
			},
			clock(){
                let that = this;
                let $clock = that.$refs.clock;
                let second = COUNT_DOWN;

                that.isGetCode = !that.isGetCode;
				that.$nextTick( ()=>{
					that.timer = setInterval(function(){
	                    if( !second ){
	                        clearInterval( that.timer );
	                        that.timer = null;
	                        that.isGetCode = !that.isGetCode;
	                    }
	                    $clock.innerHTML = (--second + '秒');
	                },1000);
				} )
			},
			login(){
				// this.$router.push('application');
				let $v = $.extend( true,{},this.$v );
				this.$v.formData.$touch();
				if( !$v.$invalid ){
					console.log( 'OK' );
				}

			}
		},
		validations:{
			formData:{
				account:{required},
				code:{required}
			}
		},
		mounted(){
		},
		destroyed(){
			if( this.timer ){
				clearInterval( this.timer );
                this.timer = null;
			}
		}
	}
</script>
<style scoped lang="less">
	@import '../../assets/style/color';

	.form{
		width:300px;
		margin:0 auto;
		>.form-group{
			margin:0;
			border-bottom:1px solid #f0f0f0;
			.form-control{
				border-color:#fff;
			}
			&:first-child{
				>.form-control{
					border-radius:2px 2px 0 0;
				}
			}
			&:last-child{
				border-bottom:none;

				>.form-control{
					border-radius: 0 0 2px 2px;		
				}
			}
			.form-group__code{
				background-color: #fff;
			    border-top-color: #eee;
			    border: none;
			    border-radius: 0;
			    &.clock{
			    	color:@cl_d9d9d9;
			    	cursor: no-drop;
			    }
			}
			.form-group__message{
			    right: -110px;
			}
		}
		>.btn-area{
			margin-top:18px;
			>.btn{
				width:100%;
			}
			>.form-control{
				margin:0 0 18px 0;
				background: none;
				color:#2B98F0;
				border:1px solid #2B98F0;
				&.active{
					background: #2B98F0;
					color:#fff;
				}
				&:hover{
					background: #2BB9F0;
					color:#fff;
				}
			}
		}
		.fg-pwd{
			font-size: 10px;
		    color: #8D8D8D;
		    line-height: 26px;
		    cursor: pointer;
		    &:hover{
		    	color:#2B98F0;
		    }
		}
	}
</style>